<template>
    <action-bar :actionBarData="actionBarData" @addMsg="addMsg"></action-bar>
    <div class="type-label-list">
        <el-table ref="tableRef" :data="typeLabelList" style="width: 100%" max-height="120">
            <el-table-column class="index" fixed type="index" label="编号"/>
            <el-table-column prop="t_name" sortable label="分类" width="300"/>
            <el-table-column prop="label" sortable label="标签">
                <template #default="scope">
                    <div class="cell" style="overflow: auto; display: flex;">
                        <div v-if="scope.row.label">
                            <div class="label" v-for="item in scope.row.label" :key="item.lid">
                                <span>{{ item.l_name }}</span>
                                <i class="el-icon el-tag__close" @click.prevent="deleteLabel(item.lid)"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg></i>
                            </div>
                            <div title="添加标签" @click.prevent="addPoetryLabel(scope.row.tid)" style="display: inline-block;"><svg t="1678672364491" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2810" width="20" height="20"><path d="M921.6 102.4v819.2H102.4V102.4h819.2m0-102.4H102.4C46.08 0 0 46.08 0 102.4v819.2c0 56.32 46.08 102.4 102.4 102.4h819.2c56.32 0 102.4-46.08 102.4-102.4V102.4c0-56.32-46.08-102.4-102.4-102.4z" fill="#8a8a8a" p-id="2811"></path><path d="M665.6 460.8h-102.4V358.4c0-25.6-25.6-51.2-51.2-51.2s-51.2 25.6-51.2 51.2v102.4H358.4c-25.6 0-51.2 25.6-51.2 51.2s25.6 51.2 51.2 51.2h102.4v102.4c0 25.6 25.6 51.2 51.2 51.2s51.2-25.6 51.2-51.2v-102.4h102.4c25.6 0 51.2-25.6 51.2-51.2s-25.6-51.2-51.2-51.2z" fill="#8a8a8a" p-id="2812"></path></svg></div>
                        </div>
                        <div v-else title="添加标签" @click.prevent="addPoetryLabel(scope.row.tid)"><svg t="1678672364491" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2810" width="20" height="20"><path d="M921.6 102.4v819.2H102.4V102.4h819.2m0-102.4H102.4C46.08 0 0 46.08 0 102.4v819.2c0 56.32 46.08 102.4 102.4 102.4h819.2c56.32 0 102.4-46.08 102.4-102.4V102.4c0-56.32-46.08-102.4-102.4-102.4z" fill="#8a8a8a" p-id="2811"></path><path d="M665.6 460.8h-102.4V358.4c0-25.6-25.6-51.2-51.2-51.2s-51.2 25.6-51.2 51.2v102.4H358.4c-25.6 0-51.2 25.6-51.2 51.2s25.6 51.2 51.2 51.2h102.4v102.4c0 25.6 25.6 51.2 51.2 51.2s51.2-25.6 51.2-51.2v-102.4h102.4c25.6 0 51.2-25.6 51.2-51.2s-25.6-51.2-51.2-51.2z" fill="#8a8a8a" p-id="2812"></path></svg></div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="160" class-name="handle-cell">
                <template #default="scope">
                    <div class="b-l_handle">
                        <button class="table-fix-btn t-change-btn" @click.prevent="updataRow(scope.row)">
                            <div></div>
                            更改
                        </button>
                        <button class="table-fix-btn t-delete-btn" @click.prevent="deleteRow(scope.row)">
                            <div></div>
                            删除
                        </button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <add-label v-if="isShowAddLabel" :tid="tid" @closeAddLabelAlert="closeAddLabelAlert"></add-label>
    <dialog-alert v-if="isDeleteAlert" :data="deleteAlertData" @on-confirm="onConfirm" @on-close="onConcel"></dialog-alert>
    <!-- <edit-type v-if="isShowEditType" :type="actionType"></edit-type> -->
    <dialog-alert v-if="isShowEditType" :data="alertData" @on-close="onCloseAlert()" @on-confirm="editType()">
        <div class="dialog-alert">
            <div class="f-l-r" style="margin-bottom: 1rem;">分类名：<el-input style="max-width: 10rem;" v-model="typeName"></el-input>
            </div> 
            <div v-if="actionType == 'add'" style="margin-bottom: 1rem;">
                <div>新标签(如果添加多个标签，标签之间请用'、'隔开)：</div> 
                <div><el-input v-model="labelName"></el-input></div>
            </div>
        </div>
    </dialog-alert>
</template>

<script setup lang="ts">
import AddLabel from './alert/add-label.vue'
import EditType from './alert/edit-type-alert.vue'
import { computed, onMounted, ref } from 'vue'
import { ITypeLabelListModel } from '../manage-type-label.model'
import manageTypeLabelStore from '../manage-type-label.store'
import { ElMessage } from 'element-plus'
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
const manageTypeLabelSe = manageTypeLabelStore()

// 头部工具栏数据
const actionBarData = {
    addButtonMsg: '添加分类',
    isShowClearBtn: false
}
// 添加诗歌信息
let actionType = ref('')
let isShowEditAuthorAlert = ref<boolean>(false)
const addMsg = () => {
    typeName.value = ''
    labelName.value = ''
    actionType.value = 'add'
    isShowEditType.value = true
}

// 添加或更改弹窗逻辑
let isShowEditType = ref<boolean>(false)

// 获取所有数据
let typeLabelList = ref<ITypeLabelListModel[]>([])
const getTypeLabelList = () => {
    manageTypeLabelSe.getTypeLabelList().then((res: any) => {
        if(res.status == 'success') {
            typeLabelList.value = res.results
        }
    })
}
onMounted(() => {
    getTypeLabelList()
})

// 添加分类与标签
let isShowAddLabel = ref<boolean>(false)
let tid = ref<number>()
const addPoetryLabel = (value: number) => {
    isShowAddLabel.value = true
    tid.value = value
}
// 关闭添加诗歌标签弹窗
const closeAddLabelAlert = (flag: boolean) => {
    isShowAddLabel.value = false
    if(flag) getTypeLabelList()
}
// 删除标签
const deleteLabel = (lid: number) => {
    const data = {
        lid: lid
    }
    manageTypeLabelSe.getDeleteLabelByLid(data).then((res: any) => {
        if(res.status = 'success') {
            getTypeLabelList()
            ElMessage({
                showClose: true,
                message: '删除标签成功！',
                type: 'success',
            })
        } else {
            ElMessage({
                showClose: true,
                message: '删除标签成功！',
                type: 'error',
            })
        }
    })
}
// 删除标签
let isDeleteAlert = ref<boolean>(false)
let typeName = ref<string>('')
let typeId = ref<number>(-1)
const deleteAlertData = computed(() => {
    return {
        title: '删除分类信息',
        message: `是否删除名为 ‘${typeName.value}’ 的标签`,
        confirmTitle: '删除',
        isShowCancleBtn: true,
        cancleTitle: '取消',
        isShowClose: true,
    }
})
const deleteRow = (value: any) => {
    typeName.value = value.t_name
    typeId.value = value.tid
    isDeleteAlert.value = true
}
// 取消删除
const onConcel = () => {
    isDeleteAlert.value = false
} 
// 确认删除
const onConfirm = () => {
    const data = {
        tid: typeId.value
    }
    manageTypeLabelSe.getDeleteTypeByTid(data).then((res: any) => {
        if(res.status == 'success') {
            ElMessage({
                showClose: true,
                message: '删除分类成功！',
                type: 'success',
            })
            isDeleteAlert.value = false
            getTypeLabelList()
        } else {
            ElMessage({
                showClose: true,
                message: '删除分类成功！',
                type: 'error',
            })
            isDeleteAlert.value = false
        }
    })
} 

let labelName = ref('')
// 弹窗信息
const alertData = computed(() => {
    return {
        title: actionType.value == 'change' ? '更改分类信息' : '添加分类信息',
        confirmTitle: actionType.value == 'change' ? '更改' : '添加',
        isShowCancleBtn: true,
        cancleTitle: '取消',
        isShowClose: true
    }
})
const onCloseAlert = () => {
    isShowEditType.value = false
}
// 点击更改
const updataRow = (value: any) => {
    typeName.value = ''
    actionType.value = 'change'
    isShowEditType.value = true
    typeId.value = value.tid
}
// 确认添加/更改
const editType = () => {
    if(actionType.value == 'add') {
        const data = {
            typeName: typeName.value, 
            labelName: labelName.value
        }
        console.log('data', data)
        manageTypeLabelSe.getAddType(data).then((res: any) => {
            if(res.status == 'success') {
                ElMessage({
                    showClose: true,
                    message: '添加分类成功！',
                    type: 'success',
                })
                isShowEditType.value = false
                getTypeLabelList()
            } else {
                ElMessage({
                    showClose: true,
                    message: '添加分类失败！',
                    type: 'error',
                })
            }
        })
    } else {
        const data = {
            t_name: typeName.value,
            tid: typeId.value
        }
        manageTypeLabelSe.getUpdateTypeByTid(data).then((res: any) => {
            if(res.status == 'success') {
                ElMessage({
                    showClose: true,
                    message: '更改分类成功！',
                    type: 'success',
                })
                isShowEditType.value = false
                getTypeLabelList()
            } else {
                ElMessage({
                    showClose: true,
                    message: '更改分类失败！',
                    type: 'error',
                })
            }
        })
    }
}
</script>

<style lang="less" scoped>
.type-label-list {
    width: 100%;
    background-color: var(--pc-bg-white);
    margin-top: 1rem;
    border-radius: 0.5rem;
    padding: 1rem 0;
    padding-top: 0rem !important;
    flex: 1;
    background-color: var(--pc-bg-white);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    :deep(.el-table) {
        tbody {
            .cell {
                height: 4rem;
                -webkit-line-clamp: 3;
            }
        }
    }
}
</style>